import React, { PureComponent, Suspense } from "react";
import { Layout,Icon } from "antd";
import classNames from "classnames";
import Link from "umi/link";
import styles from "./index.less";
import PageLoading from "../PageLoading";
import { getDefaultCollapsedSubMenus } from "./SiderMenuUtils";
import { title } from "../../defaultSettings";
import MenuPath from "@/utils/menuPath";

const BaseMenu = React.lazy(() => import("./BaseMenu"));
const { Sider } = Layout;

let firstMount = true;

export default class SiderMenu extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			openKeys: getDefaultCollapsedSubMenus(props),
		};
	}

	componentDidMount() {
		firstMount = false;
	}

	static getDerivedStateFromProps(props, state) {
		const { pathname, flatMenuKeysLen } = state;
		if (props.location.pathname !== pathname || props.flatMenuKeys.length !== flatMenuKeysLen) {
			return {
				pathname: props.location.pathname,
				flatMenuKeysLen: props.flatMenuKeys.length,
				openKeys: getDefaultCollapsedSubMenus(props),
			};
		};
		return null;
	}

	isMainMenu = (key) => {
		const { menuData } = this.props;
		return menuData.some((item) => {
			if (key) {
				return item.key === key || item.path === key;
			};
			return false;
		});
	};

	handleOpenChange = (openKeys) => {
		const moreThanOne = openKeys.filter((openKey) => this.isMainMenu(openKey)).length > 1;
		this.setState({ openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys], });
	};

	render() {
		const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile,location } = this.props;
		const { openKeys } = this.state;
		const defaultProps = collapsed ? {} : { openKeys };
		const siderClassName = classNames(styles.sider, {
			[styles.fixSiderBar]: fixSiderbar,
			[styles.light]: theme === "light",
		});
		const toPage = () => {
			const currentUser = window.localStorage.getItem("currentUser");
			return "/";
		};
		return (
			<Sider
				trigger={null}
				collapsible
				collapsed={collapsed}
				breakpoint='lg'
				width={200}
				theme={theme}
				className={siderClassName}
			>
				<div className={styles.logo} id='logo'>
					<Link to={toPage}>
						<img src={logo} alt='logo' />
					</Link>
				</div>
				<div style={{ height: '2px', background: '#eff4f5' }}></div>
				<Suspense fallback={<PageLoading />}>
					<BaseMenu
						{...this.props}
						mode='inline'
						handleOpenChange={this.handleOpenChange}
						onOpenChange={this.handleOpenChange}
						style={{ padding: "16px 0", width: "100%",borderBottom:"1px solid #E7E7E7" }}
						{...defaultProps}
					/>
				</Suspense>
        <div style={{display:"flex",alignItems:"center",height:55}}>
          <img src="../../../newUI/menu-fold.png" onClick={() => onCollapse(!collapsed)} style={{marginLeft:31,width:16,cursor:"pointer"}} />
        </div>
			</Sider>
		);
	}
}
